<template>
  <div class="home">
    <el-row class="statistics" :gutter="15">
      <el-col :span="8">
        <el-card class="box-card">
          <span class="title">总用户数</span>
          <span class="iconfont icon-users"></span>
          <span class="value">2020,2020</span>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <span class="title">总订单数</span>
          <span class="iconfont icon-order"></span>
          <span class="value">2020,2020</span>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <span class="title">总交易金额</span>
          <span class="iconfont icon-money"></span>
          <span class="value">2020,2020</span>
        </el-card>
      </el-col>
    </el-row>
    <el-card class="user-trend">
      <div id="user-trend"></div>
    </el-card>

    <el-row :gutter="20" :style="{ 'margin-top': '30px' }">
      <el-col :span="8">
        <el-card class="user-sex">
          <div id="user-sex"></div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="quarter">
          <div id="quarter"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    createCharts(option, id) {
      var myChart = this.$echarts.init(document.getElementById(id))
      myChart.setOption(option)
    },
    userTrendEcharts() {
      var option = {
        title: {
          text: '近一周日活跃人数',
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [20000, 25000, 30000, 40000, 50000, 60000, 80000],
            type: 'line',
            smooth: true,
          },
        ],
      }
      this.createCharts(option, 'user-trend')
    },
    userSexEcharts() {
      var option = {
        title: {
          text: '用户年龄分布',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: [
            '1-20岁',
            '21-30岁',
            '31-40岁',
            '41-50岁',
            '51-60岁',
            '61-70岁',
            '71-80岁',
            '81-90岁',
            '91-100岁',
          ],
        },
        series: [
          {
            name: '用户分布',
            type: 'pie',
            radius: '55%',
            data: [
              { value: 20000, name: '1-20岁' },
              { value: 60000, name: '21-30岁' },
              { value: 50000, name: '31-40岁' },
              { value: 30000, name: '41-50岁' },
              { value: 20000, name: '51-60岁' },
              { value: 10000, name: '61-70岁' },
              { value: 50000, name: '71-80岁' },
              { value: 40000, name: '81-90岁' },
              { value: 30000, name: '91-100岁' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }
      this.createCharts(option, 'user-sex')
    },
    quarterEcharts() {
      var option = {
        title: {
          text: '季度销售',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['订单数', '交易金额'],
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: ['一季度', '二季度', '三季度'],
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: '订单数',
            type: 'bar',
            data: [15000, 20000, 30000],
            color: '#c05bdd',
          },
          {
            name: '交易金额',
            type: 'bar',
            data: [35000, 60000, 80000],
            color: '#f67287',
          },
        ],
      }
      this.createCharts(option, 'quarter')
    },
  },
  created() {},
  mounted() {
    this.userTrendEcharts()
    this.userSexEcharts()
    this.quarterEcharts()
  },
}
</script>
<style lang="less" scoped>
.statistics {
  margin-top: 20px;
  .box-card {
    padding: 20px 10px;
    position: relative;
    .title {
      position: absolute;
      top: 10px;
      right: 20px;
      color: rgba(0, 0, 0, 0.45);
    }

    .value {
      float: right;
      display: inline-block;
      padding-top: 20px;
      color: hotpink;
      font-size: 20px;
    }
    .iconfont {
      font-size: 50px;
    }
    .icon-users {
      color: #40c9c6;
    }
    .icon-order {
      color: #36a3f7;
    }
    .icon-money {
      color: red;
    }
  }
}
.user-trend {
  margin-top: 30px;
  #user-trend {
    height: 250px;
    width: 100%;
  }
}

.user-sex {
  #user-sex {
    width: 100%;
    height: 300px;
  }
}
.quarter {
  #quarter {
    width: 100%;
    height: 300px;
  }
}
</style>
